<template>
  <div id="priceChanges">
    <div class="row">
      <div class="col-lg-3">
        <form>
          <div class="mb-3">
            <label class="form-label">产品</label>
            <input
              class="form-control"
              v-model="cate"
              v-on:change="showChart()"
            />
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">日期</label>
            <input
              id="date"
              class="form-control"
              type="date"
              v-model="date"
              v-on:change="showChart()"
            />
          </div>
          <div class="mb-3">
            <label class="form-label">产地</label>
            <select
              ref="origin"
              class="form-select"
              aria-label="Default select example"
              v-model="getProvince"
            >
              <option v-for="p in province" :key="p" :value="p">
                {{ p }}
              </option>
            </select>
          </div>
          <div class="align-center">
            <button class="btn btn-success" v-on:click="addOrigin()">
              添加产地
            </button>
          </div>
        </form>
      </div>

      <div class="col-lg-9" v-show="showNoData">
        <br /><br /><br /><br />
        <h3 class="text-primary align-center">暂无数据</h3>
      </div>
      <div class="col-lg-9" v-show="showPriceChange">
        <!-- <h2>{{ cate }}的{{ getYear }}年{{ getProvince }}省价格走势</h2> -->
        <br />
        <div>
          <button class="btn btn-primary" v-on:click="changeType('bar')">
            柱状图
          </button>
          <button class="btn btn-success" v-on:click="changeType('line')">
            折线图
          </button>
          <div
            id="priceChange"
            class="chart"
            :style="{ width: '600%', height: '500px' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      showPriceChange: false,
      showNoData: true,
      getProvince: "",
      provinces: [],
      chart: "",
      cate: "",
      price: [],
      date: "",
      option: {
        legend: {},
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: [],
          },
        ],
        yAxis: [{ gridIndex: 0 }],
        // grid: [{ bottom: "5%" }, { top: "35%" }],
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 35,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [],
            lineStyle: {
              normal: {
                color: "blue",
                width: 3,
              },
            },
          },
        ],
      },
      province: [
        "山东",
        "江苏",
        "安徽",
        "浙江",
        "福建",
        "上海",
        "广东",
        "广西",
        "海南",
        "湖北",
        "湖南",
        "河南",
        "江西",
        "北京",
        "天津",
        "河北",
        "山西",
        "内蒙古",
        "宁夏",
        "新疆",
        "青海",
        "陕西",
        "甘肃",
        "四川",
        "云南",
        "贵州",
        "西藏",
        "重庆 ",
        "辽宁",
        "吉林",
        "黑龙江",
      ],
      year: ["2021", "2020", "2019"],
    };
  },
  methods: {
    addOrigin() {
      if (this.getProvince != "") {
        if (this.cate != "" && this.date != "") {
          if (this.provinces.includes(this.getProvince)) {
            alert("已存在");
          } else {
            this.updateChart();
          }
        }
      }
    },
    showChart() {
      if (this.cate != "" && this.date != "") {
        // this.updateChart();
        this.price = [];
        this.provinces = [];
        this.option.xAxis[0].data = this.provinces;
        this.option.series[0].data = this.price;
        this.chart.setOption(this.option);
        this.showNoData = false;
        this.showPriceChange = true;
      } else {
        this.showNoData = true;
        this.showPriceChange = false;
      }
    },
    updateChart() {
      this.provinces.push(this.getProvince);
      this.axios
        .get(
          "http://122.51.157.58:8081/api-service/getByDateOriginCate?cate=" +
            this.cate +
            "&marketDate=" +
            this.date +
            "&key=123456&origin=" +
            this.getProvince
        )
        .then((body) => {
          var result = body.data;
          if (result.data.result.length == 1) {
            this.price.push(result.data.result[0].originAvgPrice);
            this.option.xAxis[0].data = this.provinces;
            this.option.series[0].data = this.price;
            this.option.series[0].name = "价格走向";
            this.chart.setOption(this.option);
          } else {
            this.price.push(0);
            this.option.xAxis[0].data = this.provinces;
            this.option.series[0].data = this.price;
            // this.option.series[0].name = cateName + "价格走向";
            this.chart.setOption(this.option);
          }
        });
    },
    changeType(val) {
      this.option.series[0].type = val;
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.chart = this.echarts.init(document.getElementById("priceChange"));
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>


<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>